<template>
  <q-page class="column" :padding="!$q.platform.is.mobile">

    <q-inner-loading visible v-if="model.noticeId < 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading> 

    <!-- create new -->
    <div v-if="model.noticeId>=0">
      <q-list-header>影片名称</q-list-header>
      <q-list class="col q-py-none" :no-border="$q.platform.is.mobile" v-if="model.noticeId>=0">
        <q-item>
          <q-input class="full-width" hide-underline placeholder="票码兑换影片名称，如：乘风破浪" 
                v-model="model.title" />
        </q-item>
      </q-list>

      <q-list-header class="row">
          <span class="col">豆瓣ID</span>
          <small class="col-auto text-primary">(可直接复制Excel表中的对应数据列)</small>
      </q-list-header>
      <q-list>
        <q-item>
          <q-input class="full-width" type="textarea" rows="5" :max-height="125" hide-underline
              placeholder="中奖用户豆瓣ID，以逗号或换行分割"
              v-model="model.userIds"/>
        </q-item>
      </q-list>
      
      <q-list-header class="row">
          <span class="col">票码</span>
          <small class="col-auto text-secondary">(可直接复制Excel表中的对应数据列)</small>
      </q-list-header>
      <q-list>
        <q-item>
          <q-input class="full-width" type="textarea" rows="5" :max-height="125" hide-underline v-model="model.userConfigs"
              placeholder="电影票兑换码，与豆瓣ID一一对应，以逗号或换行分割" color="secondary" />
        </q-item>      

      </q-list>
    </div>

    <!-- save -->
    <q-btn color="primary" class="fixed" label="保存" icon="mdi-content-save"
        style="right: 15px; bottom: 15px"
        v-if="model.noticeId>=0" :loading="loading" @click="save" />
  </q-page>
</template>

<script>
export default {
  name: 'PageDoumailCodeView',
  data() {
    return {
      loading: false,
      model : {
        noticeId : -1,
        title: '',
        userIds: '',
        userConfigs:''
      }
    }
  },
  mounted() {
    let me = this;
    me.loadModel(this.$route.params.id);
    this.$api.ui.pageBackBtn = function(){
      if(me.model.noticeId > 0) {
        me.$router.push('/doumail-code/view/' + me.model.noticeId);
      } else {
        me.$router.push('/doumail-code');
      }
    }
  },
  methods: {
    loadModel(id) {
      let me = this;
      if(id <= 0) {
        this.model = { noticeId : 0, title: '', userIds: '', codes:''  }
      } else {
        this.$api.notice.loadOne(id, res=>{
          let data = res.data.model;
          me.model.noticeId = data.noticeId;
          me.model.title = data.title;
          me.model.userIds = data.userIds;
          me.model.userConfigs = data.userConfigs;
        });
      }
    },
    save() {
      let me = this;
      this.loading = true;
      this.$api.notice.saveDoumailCode(this.model, res=>{
        let id = res.data.model.noticeId;
        me.$q.notify({
          message: '保存成功',
          type: 'positive',
          color: 'positive',
          icon: 'mdi-check'
        });
        me.$router.push('/doumail-code/view/' + id);
      }, err=>{
        this.loading = false;
      });
    }
  }
}
</script>

